<template>
	<a-form :model="formState" :rules="rules" ref="formRef">
		<div class="items">
			<div style="width:50%">
				<p>患者姓名<span class="my_required">*</span></p>
				<a-form-item name="userName">
					<MyInput :modelV="formState.userName" @submit="formState.userName = $event" :maxlength="12" />
				</a-form-item>
			</div>
			<div style="width:50%">
				<p>联系方式<span class="my_required">*</span></p>
				<a-form-item name="phone">
					<MyInput :modelV="formState.phone" @submit="formState.phone = $event" :maxlength="11" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:50%">
				<p>身份证号<span class="my_required">*</span></p>
				<a-form-item name="idCard">
					<MyInput :modelV="formState.idCard" @submit="formState.idCard = $event" :maxlength="23" 
						@blur="onBlur"
					/>
				</a-form-item>
			</div>
			<div style="width:50%">
				<p>教育程度<span class="my_required">*</span></p>
				<a-form-item name="education">
					<a-select v-model:value="formState.education" placeholder="请选择" :options="$OPTIONS.EDUCATION_OPTIONS" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:50%">
				<p>性别</p>
				<a-form-item>
					<a-select v-model:value="formState.sex" placeholder="身份证自动计算" :options="$OPTIONS.SEX_OPTIONS" :disabled="true" />
					<!-- <MyInput :modelV="formState.sex" @submit="formState.sex = $event" placeholder="身份证自动计算" :disabled="true" /> -->
				</a-form-item>
			</div>
			<div style="width:50%">
				<p>出生日期</p>
				<a-form-item>
					<MyInput :modelV="formState.birthday" @submit="formState.birthday = $event" placeholder="身份证自动计算" :disabled="true" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:50%">
				<p>职业</p>
				<a-form-item name="occupation">
					<a-select v-model:value="formState.occupation" placeholder="请选择" :options="$OPTIONS.OCCUPATION_OPTIONS" />
				</a-form-item>
			</div>
			<div style="width:50%">
				<p>民族</p>
				<a-form-item name="nation">
					<a-select v-model:value="formState.nation" placeholder="请选择" :options="$OPTIONS.NATION_OPTIONS" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>常住地址</p>
				<a-form-item name="address">
					<MyInput :modelV="formState.address" @submit="formState.address = $event" />
				</a-form-item>
			</div>
		</div>
		<div class="items">
			<div style="width:100%">
				<p>备注内容</p>
				<a-form-item name="remark">
					<a-textarea v-model:value="formState.remark" :autoSize="{ minRows: 3 }" placeholder="请输入..." />
				</a-form-item>
			</div>
		</div>
		<div class="bottom-btn">
			<MyButton class="reaset" @click="$emit('onReset')" title="取消" />
			<MyButton class="submit" @click="handleSubmit" title="保存" />
		</div>
	</a-form>
</template>

<script lang="ts" setup>
	import { ref, watch } from "vue";
	import cloneDeep from 'lodash/cloneDeep';
	import debounce from "@/utils/debounce";
	import message from "@/utils/message";
	import { getCardInfo } from "@/utils/computedAge";
	import { NameValidation,PhoneValidation, CardValidation } from "@/utils/validation/customValidation";
	import { create, updated } from "@/api/patient";
	
	const PROPS = defineProps({
		currentPatientInfo: {
			type: Object,
			default() {
				return {};
			},
		},
	});
	const PATIENTEMIT = defineEmits(["onSubmit"]);
	
	const formRef = ref();
	const formState = ref < any > ({});
	const rules = {
		userName: [{trigger: 'blur',validator: NameValidation}],
		education: [{required: true,message: "请选择教育程度"}],
		phone: [{trigger: 'blur',validator: PhoneValidation}],
		idCard: [{ validator: CardValidation,trigger: 'blur' }],
	};
	
	function onBlur(){
		if(!formState.value.idCard || formState.value.idCard == '') return;
		const res = getCardInfo(formState.value.idCard);
		const { sex, birthDay } = res;
		formState.value.sex = Number(sex);
		formState.value.birthday = birthDay;
	}
	
	const handleSubmit = debounce(()=>{
		formRef.value.validate().then(async (values: any) => {
			if(formState.value.id){
				const result = await updated(formState.value);
				if (!result) return;
				message.success('修改患者成功');
				PATIENTEMIT("onSubmit");
			}else{
				const result = await create(formState.value);
				if (!result) return;
				message.success('新增患者成功');
				PATIENTEMIT("onSubmit");
			}
		});
	},50);
	
	watch(()=>PROPS.currentPatientInfo,(obj)=>{
		formState.value = cloneDeep(obj);
	},{ immediate:true });
	
</script>

<style lang="less" scoped>
	.items{
		display: flex;
		// height:60px;
		align-items: center;
		>div{
			display: flex;
			align-items: center;
			margin-top:20px;
			margin-right:15px;
			>p:nth-of-type(1){
				margin-right:10px;
				width:5em;
				text-align: right;
			}
		}
	}
	.my_required{
		color: #ff4d4f;
		font-size: 12px;
		font-family: SimSun, sans-serif;
		line-height: 1;
		margin-left: 6px;
	}
	.reaset,.submit{
		width:20%;
	}
</style>